<template>
	<view>
		<view>
			<u-row  v-if="showTop">
				<u-col span="2">
					<view class="days">
						项目进度
					</view>
				</u-col>
				<u-col span="8">
					<u-slider v-model="value1" min="0" :max="days"></u-slider>
				</u-col>
				<u-col span="2">
					<view class="days">
						剩{{days-value1}}天/{{days}}天
					</view>
				</u-col>
			</u-row>
			<u-row  v-if="showTop">
				<u-col span="2">
				</u-col>
				<u-col span="8">
					<u-slider :disabled="processData.arr.length?true:false" v-model="value2" min="0"
						max="100"></u-slider>
				</u-col>
				<u-col span="2">
					{{value2+"%"}}
				</u-col>
			</u-row>
			<u-row>
				<u-col span="4"></u-col>
				<u-col span="4">
					<u-button type="primary" @click="add" text="新增工序" size="mini"></u-button>
				</u-col>
				<u-col span="4"></u-col>
			</u-row>
		</view>
		<view class="process" id="process">
			<scroll-view scroll-x="true" class="scrollView">
				<view :style="{width: processData.width+'px'}">
					<u-steps :current="-1">
						<u-steps-item :key="index" :isKey="true" :titleKey="index+1"
							v-for="(item,index) in processData.arr"></u-steps-item>
					</u-steps>
				</view>
				<view class="process-item" :key="index" v-for="(item,index) in processData.arr">
					<view class="process-item-title">
						<view class="process-item-button">
							<u-button @click="goLeft(item,index)" :disabled="index==0" type="primary" size="mini"
								shape="circle">
								<u-icon size="12" color="#fff" name="arrow-left"></u-icon>
							</u-button>
						</view>
						<view class="process-item-button">
							<u-button @click="del(index)" type="error" size="mini" shape="circle">
								<u-icon size="12" color="#fff" name="trash"></u-icon>
							</u-button>
						</view>
						<view class="process-item-button">
							<u-button @click="goRight(item,index)" :disabled="index==(processData.arr.length-1)"
								type="primary" size="mini" shape="circle">
								<u-icon size="12" color="#fff" name="arrow-right"></u-icon>
							</u-button>
						</view>
					</view>
					<view class="text">
						<textarea v-model="item.content" style="width: 100%;height: 100%;font-size: 13px;" />
					</view>
					<view class="status">
						<u-switch @change="change($event,index)" active-color="#13ce66" inactive-color="#ff4949"
							size="15" v-model="item.status"></u-switch>
						<view class="completion-time">
							{{item.completeTime}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<style>
	page {
		background-color: #fff;
	}
</style>

<script setup>
	import {
		ref,
		reactive,
		watch,
		onMounted,
	} from 'vue';

	/**
	 * @property {Number}						day			    设置剩余天数（默认 0 ）
	 * @property {Number}						days		    设置总天数（默认 30 ）
	 * @property {Array}				        list		    工序表
	 * @property {Boolean}                      showTop         是否显示头部
	 * {
			content: "",
			status: 0,
			completeTime: "",
		}
	 *
	 * @event {Function} processHandler 返回工序列表
	 */

	const props = defineProps({
		day: {
			type: Number,
			default: 0
		},
		days: {
			type: Number,
			default: 30
		},
		list: {
			type: Array,
			default: []
		},
		showTop:{
			type: Boolean,
			default: true
		}
	})

	function processHandler() {
		let arr = processData.arr;
		arr.forEach(item => {
			if (item.status) {
				item.status = 1;
			} else {
				item.status = 0;
			}
		})
		return {
			arr,
			value1:value1.value,
			value2:value2.value
		};
	}

	defineExpose({
		processHandler
	})

	let value1 = ref(0);
	let value2 = ref(0);


	const processData = reactive({
		arr: [],
		width: 0,
	});

	function add() {
		processData.arr.push({
			content: "",
			status: false
		})
	}

	function del(index) {
		processData.arr.splice(index, 1);
	}

	function goLeft(item, index) {
		let temp = processData.arr[index - 1].content;
		processData.arr[index - 1].content = item.content;
		processData.arr[index].content = temp;
	}

	function goRight(item, index) {
		let temp = processData.arr[index + 1].content;
		processData.arr[index + 1].content = item.content;
		processData.arr[index].content = temp;
	}

	function change(flag, index) {
		let now = new Date();
		let DateTime = now.getFullYear() + "-" + ((now.getMonth() + 1)<10?("0"+(now.getMonth() + 1)):(now.getMonth() + 1)) + "-" + (now.getDate()<10?("0"+now.getDate()):now.getDate())+ " " + (now.getHours()<10?"0"+now.getHours():now.getHours()) + ":" +
			(now.getMinutes()<10?"0"+now.getMinutes():now.getMinutes()) + ":" + (now.getSeconds()<10?"0"+now.getSeconds():now.getSeconds());
		if (flag) {
			for (var i = 0; i <= index; i++) {
				processData.arr[i].status = true;
				if (!processData.arr[i].completeTime) {
					processData.arr[i].completeTime = DateTime
				}
			}
		} else {
			for (var i = index; i < processData.arr.length; i++) {
				processData.arr[i].status = false;
				if (processData.arr[i].completeTime) {
					delete processData.arr[i].completeTime;
				}
			}
		}
	}

	const x = ref(0);
	const y = ref(0);
	const old = reactive({
		x: 0,
		y: 0
	})

	function changegg(e) {
		old.x = e.detail.x
		old.y = e.detail.y
	}

	watch(props.day, (newValue, oldValue) => {
		console.log(newVlaue);
		value1.value = newValue;
	})

	watch(processData.arr, (newValue, oldValue) => {
		processData.width = 188 * newValue.length;
		if (processData.arr.length > 0) {
			let sum = 0;
			let count = processData.arr.length;
			for (var i = 0; i < count; i++) {
				if (processData.arr[i].status) {
					sum++;
				}
			}
			value2.value = parseInt((sum / count) * 100);
		} else {
			value2.value = 0;
		}
	})

	watch(() => props.list, (newValue, oldValue) => {
		let arr = newValue;
		arr.forEach(item => {
			if (item.status) {
				item.status = true;
			} else {
				item.status = false;
			}
		})
		processData.arr.splice(0, processData.arr.length, ...arr);
	},{immediate: true, deep: true})

</script>

<style scoped>
	.status {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #b6b6b6;
		padding: 5px 0px 5px 0px;
	}

	.completion-time {
		color: #c7c7c7;
		font-size: 11px;
		padding-top: 2px;
	}

	.text {
		width: 100%;
		height: 68px;
		border: 1px solid #b6b6b6;
		border-radius: 5px;
		margin-top: 7px;
	}

	.days {
		font-size: 12px;
	}

	.process {
		height: 210px;
		margin: 20px 8px 8px 8px;
		border: 2px solid #d3d3d3;
		padding: 8px 8px 8px 8px;
	}

	.scrollView {
		display: flex;
		white-space: nowrap;
	}

	.process-item {
		border: 1px solid #b6b6b6;
		border-radius: 4px;
		display: inline-block;
		justify-content: center;
		padding: 8px;
		margin: 0px 6px 0px 6px;
		width: 150px;
		height: 150px;
		margin: 10px;
		box-shadow: -1px -1px 12px 0px rgba(50, 50, 50, 0.43);
	}

	.process-item-title {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #b6b6b6;
		padding-bottom: 4px;
	}

	.process-item-button {
		width: 22px;
		height: 22px;
		border-radius: 100%;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>